import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pornhub_app/components/app_bg_view.dart';
import 'package:pornhub_app/components/image_view.dart';
import 'package:pornhub_app/components/keep_alive_wrapper.dart';
import 'package:pornhub_app/components/pay/enum_pay.dart';
import 'package:pornhub_app/components/pay/model/gold_model.dart';
import 'package:pornhub_app/components/pay/model/vip_model.dart';
import 'package:pornhub_app/components/pay/pay_view.dart';
import 'package:pornhub_app/components/tab_bar_indicator/easy_fixed_indicator.dart';
import 'package:pornhub_app/components/text_view.dart';
import 'package:pornhub_app/generate/app_image_path.dart';
import 'package:pornhub_app/routes/routes.dart';
import 'package:pornhub_app/utils/color.dart';
import 'package:pornhub_app/utils/extension.dart';
import 'package:pornhub_app/views/mine/vip/vip_page_controller.dart';

class VipPage extends GetView<VipPageController> {
  const VipPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: COLOR.color_161616,
      appBar: _buildAppBar(),
      body: TabBarView(controller: controller.tabController, children: [
        KeepAliveWrapper(child: _buildBodyView(0)),
        KeepAliveWrapper(child: _buildBodyView(1)),
      ]),
    );
  }

  _buildAppBar() {
    return AppBar(
      backgroundColor: Colors.transparent,
      shadowColor: Colors.transparent,
      centerTitle: false,
      titleSpacing: 0,
      title: TabBar(
        tabs: controller.tabs,
        controller: controller.tabController,
        isScrollable: true,
        labelStyle: TextStyle(
          fontSize: 17.w,
          fontWeight: FontWeight.w600,
          color: COLOR.white,
        ),
        unselectedLabelStyle: TextStyle(
          fontSize: 17.w,
          fontWeight: FontWeight.w600,
          color: COLOR.color_A1A1A1,
        ),
        indicator: EasyFixedIndicator(
          width: 0.w,
          height: 0.w,
        ),
        dividerHeight: 0,
        onTap: (index) {
          controller.tabIndex.value = index;
        },
      ),
      actions: [
        TextButton(
          onPressed: () => Get.toRechargeRecord(
              type: controller.tabIndex.value == 0 ? 2 : 3),
          child: TextView(
            text: "明细",
            fontSize: 12.w,
            color: COLOR.white,
          ),
        )
      ],
    );
  }

  _buildBodyView(int index) {
    return Padding(
      padding: EdgeInsets.all(8.w),
      child: Column(
        children: [
          Expanded(
              child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ///余额、金币信息
                _buildBalanceView(index),
                20.verticalSpace,
                TextView(
                  text: index == 0 ? "选择开通会员" : "选择金额",
                  color: COLOR.white,
                  fontSize: 18.w,
                ),

                ///会员卡列表
                8.verticalSpace,
                index == 0 ? _buildVipCardView() : _buildGoldView(),

                ///VIP权益说明
                index == 0 ? 20.verticalSpace : const SizedBox.shrink(),
                index == 0
                    ? TextView(
                        text: "会员权益",
                        color: COLOR.white,
                        fontSize: 18.w,
                      )
                    : const SizedBox.shrink(),
                index == 0 ? 10.verticalSpace : const SizedBox.shrink(),
                index == 1
                    ? const SizedBox.shrink()
                    : ImageView(
                        width: double.infinity,
                        height: 71.w,
                        src: AppImagePath.mine_vip_rights_description,
                        fit: BoxFit.contain,
                      ),

                ///支付方式
                20.verticalSpace,
                TextView(
                  text: "选择支付方式",
                  color: COLOR.white,
                  fontSize: 18.w,
                ),
                10.verticalSpace,
                Obx(() => index == 0
                    ? _buildVipPayView(controller.currentVipCard.value)
                    : _buildGoldPayView(controller.currentGoldCard.value)),
                50.verticalSpace,
              ],
            ),
          )),
          Obx(() => AppBgView(
                width: double.infinity,
                height: 40.w,
                alignment: Alignment.center,
                backgroundColor: COLOR.color_FF9000,
                radius: 20.w,
                text: controller.tabIndex.value == 0
                    ? '充值${controller.currentVipCard.value.disPrice}'
                    : '充值${controller.currentGoldCard.value.price}',
                textSize: 16.w,
                textColor: COLOR.black,
                fontWeight: FontWeight.bold,
                onTap: () {
                  if (index == 0) {
                    controller.startPay(
                      amount: (controller.currentVipCard.value.disPrice ?? 0)
                          .toDouble(),
                      purType: PurTypeEnum.vip,
                      payId: controller.currentVipCard.value.cardId ?? 0,
                      currentPayType: controller.mCurrentVipPayType,
                    );
                  } else {
                    controller.startPay(
                      amount: (controller.currentVipCard.value.price ?? 0)
                          .toDouble(),
                      purType: PurTypeEnum.gold,
                      payId: controller.currentGoldCard.value.goldId ?? 0,
                      currentPayType: controller.mCurrentGoldPayType,
                    );
                  }
                },
              )),
          30.verticalSpace,
        ],
      ),
    );
  }

  ///用户余额信息
  _buildBalanceView(int index) {
    return AppBgView(
      height: 100.w,
      backgroundColor: COLOR.color_252525,
      border: Border.all(color: COLOR.white.withValues(alpha: 0.4)),
      radius: 12.w,
      padding: EdgeInsets.all(12.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextView(
            text: "我的余额",
            color: COLOR.white,
            fontSize: 15.w,
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  index == 0
                      ? TextView(
                          text: "¥",
                          color: COLOR.color_FF9000,
                          fontSize: 22.w,
                        ).paddingTop(12.w)
                      : ImageView(
                          src: AppImagePath.mine_vip_gold_icon,
                          width: 25.w,
                          height: 25.w,
                        ),
                  5.horizontalSpace,
                  Obx(() => TextView(
                        text:
                            "${controller.tabIndex.value == 0 ? controller.userService.assets.bala : controller.userService.assets.gold}",
                        color: COLOR.color_FF9000,
                        fontSize: 36.w,
                      ))
                ],
              ),
              const Spacer(),
              AppBgView(
                width: 80.w,
                height: 34.w,
                backgroundColor: COLOR.color_FF9000,
                radius: 17.w,
                text: "提现",
                textColor: COLOR.black,
                textSize: 15.w,
                onTap: () {
                  Get.toWithdraw(
                      title: controller.tabIndex.value == 0 ? "余额" : "金币");
                },
              ),
            ],
          )
        ],
      ),
    );
  }

  ///会员卡列表
  _buildVipCardView() {
    return SizedBox(
      height: 130.w,
      child: Obx(() => ListView.separated(
            scrollDirection: Axis.horizontal,
            itemCount: controller.vipList.length,
            itemBuilder: (BuildContext context, int index) {
              return _buildCardItemView(controller.vipList[index]);
            },
            separatorBuilder: (context, index) {
              return 8.horizontalSpace;
            },
          )),
    );
  }

  Widget _buildCardItemView(VipModel item) {
    return Obx(() => AppBgView(
          width: 116.w,
          height: 130.w,
          backgroundColor: COLOR.color_252525,
          border: Border.all(
              color: controller.currentVipCard.value == item
                  ? COLOR.color_FF9000
                  : COLOR.white.withValues(alpha: 0.4)),
          radius: 12.w,
          onTap: () {
            controller.currentVipCard.value = item;
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextView(
                text: "${item.cardName}",
                color: COLOR.color_FF9000,
                fontSize: 14.w,
              ),
              9.verticalSpace,
              TextView(
                text: "¥${item.disPrice ?? 0}",
                color: COLOR.color_FF9000,
                fontSize: 26.w,
                fontWeight: FontWeight.w600,
              ),
              7.verticalSpace,
              TextView(
                text: "原价¥${item.price ?? 0}",
                color: COLOR.color_FF9000,
                fontSize: 14.w,
                decoration: TextDecoration.lineThrough,
                decorationColor: COLOR.color_FF9000,
              ),
            ],
          ),
        ));
  }

  ///金币充值列表
  _buildGoldView() {
    return SizedBox(
      child: Obx(() => GridView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: controller.goldList.length,
            padding: EdgeInsets.zero,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 10.w,
                mainAxisSpacing: 10.w,
                childAspectRatio: 104.w / 85.w),
            itemBuilder: (BuildContext context, int index) {
              return _buildGoldItemView(controller.goldList[index]);
            },
          )),
    );
  }

  _buildGoldItemView(GoldModel item) {
    return Obx(
      () => AppBgView(
        height: 85.w,
        radius: 12.w,
        onTap: () => controller.currentGoldCard.value = item,
        imagePath: controller.currentGoldCard.value == item
            ? AppImagePath.mine_vip_gold_bg_checked
            : AppImagePath.mine_vip_gold_bg_uncheck,
        fit: BoxFit.fill,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                ImageView(
                  src: AppImagePath.mine_vip_gold_icon,
                  width: 20.w,
                  height: 20.w,
                ),
                3.horizontalSpace,
                TextView(
                  text: "${item.goldNum ?? 0}金币",
                  color: controller.currentGoldCard.value == item
                      ? COLOR.color_FF9000
                      : COLOR.white,
                  fontSize: 16.w,
                  fontWeight: FontWeight.w600,
                ),
              ],
            ),
            18.verticalSpace,
            TextView(text: "售价${item.price ?? 0}元"),
            5.verticalSpace,
          ],
        ),
      ),
    );
  }

  _buildVipPayView(VipModel model) {
    return PayView(
      amount: (model.disPrice ?? 0).toDouble(),
      payId: model.cardId ?? 0,
      purType: PurTypeEnum.vip,
      payType: model.types ?? [],
      isShowBalance: false,
      onPaySelected: (payModel) {
        controller.mCurrentVipPayType = payModel;
      },
    );
  }

  _buildGoldPayView(GoldModel model) {
    return PayView(
      amount: (model.price ?? 0).toDouble(),
      payId: model.goldId ?? 0,
      purType: PurTypeEnum.gold,
      payType: model.types ?? [],
      isShowBalance: false,
      onPaySelected: (payModel) {
        controller.mCurrentGoldPayType = payModel;
      },
    );
  }
}
